<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员中心-首页</title>

    <link rel="stylesheet" href="css/projectmain.css">
    <link rel="stylesheet" href="css/membermain.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/Register.css">
    <link rel="stylesheet" href="css/card-list.css">
    <link rel="stylesheet" href="css/minicry.css">
    <style>
        label{position:absolute}
        #expertise label{position:static;margin-left:0;margin-right:15px;}
    </style>
    <script src="./js/My97DatePicker/WdatePicker.js"></script>    
</head>
<body>
    <div class="main">
        <div class="head">
            <a href="http://www.wyzyz.org" class="logo">
                <img src="http://www.cflac.org.cn/zhiyuanzhe/image/logo.png" alt="">
            </a>
            <div class="topSearch">
                <form action="http://www.cflac.org.cn/was5/web/search" method="POST" accept-charset="UTF-8">
                    <input type="text" value="站内搜索..." class="input1">
                    <input type="image" class="btn1" src="http://www.wyzyz.org/images/topBtn.gif">
                </form>
            </div>
        </div>
        
        <div class="nav">
            <ul>
               <li><a href="http://www.wyzyz.org" class="aNow" style="width:37px;">首 页</a></li>
               <li><a href="#" class="aNow">要闻资讯</a></li>
               <li><a href="#" class="aNow">精彩视频</a></li>
               <li><a href="#" class="aNow">品牌活动</a></li>
               <li><a href="#" class="aNow">各地联动</a></li>
               <li><a href="#" class="aNow">志愿者协会</a></li>
               <li><a href="#" class="aNow">名家公益</a></li>
               <li><a href="#" class="aNow">志愿之星</a></li>
               <li><a href="#" class="aNow">互动交流</a></li>
               <li><a href="#" class="aNow">资料下载</a></li>
            </ul>
        </div>

<div>
<div class="member-main" id="membermain">
    <div class="sidebar">
        <div class="sidebarli" style="border-bottom: 1px solid #bdbdbd;">会员中心</div>
        <ul id="sideList">
            <li class="sidebarli sidebarhover" @click="whenListClicked(1)">首页</li>
            <li class="sidebarli sidebarhover" @click="whenListClicked(2)">会员卡</li>
            <li class="sidebarli sidebarhover" @click="whenListClicked(3)">修改资料</li>
            <li class="sidebarli sidebarhover" @click="whenListClicked(4)">修改密码</li>
            <li class="sidebarli sidebarhover" @click="whenListClicked(5)">站内信</li>
            <li class="sidebarli sidebarhover" @click="whenListClicked(6)">我的评论</li>
            <!--<li class="sidebarli sidebarhover" id="LaunchProject">发起的项目</li>-->
            <li class="sidebarli sidebarhover" @click="whenListClicked(7)">反馈意见</li>
        </ul>
    </div>

    <div id="sideContent" class="member-content">
        <section  v-if="isSeen === 1">
            <div class="basic-info">
                <div class="basic-info-title"><p style="margin-left: 10px;font-weight: 400;color:#000;font-size: 16px;line-height: 30px;display:inline-block">基本信息</p><button style="float:right;margin-right:10px;">修改资料</button></div>
                <div class="basic-info-content">
                    <div class="l">
                        <p class="dp-detail" style=";margin-left: 10px;">注册日期：{{indexReTime}}，最近登录时间：{{indexLastTime}}</p>
                        <p style="height: 40px;font-size: 16px;font-weight: 500;line-height: 40px;color: #000;;margin-left: 10px;">欢迎您回来，{{indexUsrName}}({{indexUsrNum}})</p>
                        <p style="height: 40px;font-size: 16px;font-weight: 500;line-height: 40px;color: #000;margin-top:-10px;margin-left: 10px;">站内信，{{indexWebInfo}}</p>
                    </div>
                    <div class="r"><img :src="indexUsrImg" alt="..."></div>
                </div>
            </div>

            <div class="basic-info" style="margin-bottom: 15px;">
                <div class="basic-info-title"><p style="margin-left: 10px;font-weight: 400;color:#000;font-size: 16px;line-height: 30px;display:inline-block;">活动经历</p><button style="float:right;margin-right:10px;">新建活动</button></div>
                <div class="basic-info-content">
                    <div class="select-list">
                        <div class="part" id="card-panel">
                            <div class="card-list-wrapper"  style="position:relative;">
                                <div class="card-list-conl">
                                    <div class="card-list-img">
                                        <img id="current_img" src="img/face1.png">
                                    </div>
                                    <ul class="card-img-list">
                                        <li class="card-list-item" style="margin-right:5px;"><img id="card-img-1" src="img/face1.png"></li>
                                        <li class="card-list-item" style="margin-right:5px;"><img id="card-img-2" src="img/face2.png"></li>
                                        <li class="card-list-item"><img data-target="add" id="card-img-3" src="icon/add.png"></li>
                                    </ul>
                                </div>
                                <div class="card-list-conr" style="width:400px;">
                                    <div class="content-title" style="width:300px;">
                                        <label class="title-label">下乡送温暖 </label>
                                    </div>
                                    <div class="content-con" style="width:390px;">
                                        <div class="dp-detail">2017-01-12 北京市</div>
                                        <div class="content-actcontent" style="height:105px;">
                                            <div class="content-detail" style="width:390px;">
                                                下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖
                                            </div>
                                        </div>
                                        <!--<div class="content-title" style="margin-top:10px; font-size:16px;border-top:1px solid #bdbdbd;">评论：</div>  -->
                                        <ul id="breContent" style="border-top:1px solid #bdbdbd;margin-top:10px;">
                                            <li>张文君： 真的非常好！下次也想参加这样的活动 2017-01-12</li>
                                        </ul>
                                        <i id="isExten" style="position:absolute;top:250px;left:400px;text-decoration:underline;" onclick="Shou_Hidden(moreContent , breContent)"><a href="#" style="color:#bdbdbd;">更多评论</a></i>                                 
                                    </div>
                                </div>
                                <div class="more-content" id="moreContent" style="display:none;width:640px;">
                                    <div class="other-comment" style="width:600px;">
                                        <label class="other-name">王立军：</label>
                                        <input class="other-input" style="width:350px" type="text">
                                        <button class="btn-primary" style="left:450px;top:0;">评论</button>
                                    </div>
                                    <div class="other-comment" style="border-top:1px solid #bdbdbd;width:590px;">
                                        <ul>
                                            <li class="comment-item"><label class="other-name">王立军：</label><p class="other-comment-content">真的非常好！下次也想参加这样的活动 2017-01-12</p></li>
                                            <li class="comment-item"><label class="other-name">王立军：</label><p class="other-comment-content">真的非常好！下次也想参加这样的活动 2017-01-12</p></li>
                                            <li class="comment-item"><label class="other-name">王立军：</label><p class="other-comment-content">真的非常好！下次也想参加这样的活动 2017-01-12</p></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </section>

        <section v-if="isSeen === 2">
            <div class="side-detail" style="border-bottom: 1px solid #bdbdbd; margin-bottom: 20px;">
                <div class="img-detail" style="float: left;width: 60%;height: 100%;">
                    <img :src="memberImgA" style="width: 100%;height: 250px;">
                    <button>打印</button>
                    <button>下载</button>
                </div>
                <div class="img-upload" style="float: left;width: 40%;height: 100%;">
                    <div style="text-align: center;">
                        <img :src="memberUpLoadA"  style="width: 120px;height: 150px;">
                        <p>
                            <button>选择上传</button>
                            <p>会员卡证件照片</p>
                            <p>宽200像素 x 高150像素</p>
                            <p>支持JPG,GIF,PNG格式，大小不超过200K</p>
                        </p>
                    </div>
                </div>
            </div>
            <!--<hr style="margin: 0 20px;">-->
            <div class="side-detail">
                <div class="img-detail" style="float: left;width: 60%;height: 100%;">
                    <img :src="memberImgB" style="width: 100%;height: 250px;">
                    <button>打印</button>
                    <button>下载</button>
                </div>
                <div class="img-upload" style="float: left;width: 40%;height: 100%;">
                    <div style="text-align: center;">
                        <img :src="memberUpLoadB"  style="width: 120px;height: 150px;">
                        <p>
                            <button>选择上传</button>
                            <p>会员卡证件照片</p>
                            <p>宽200像素 x 高150像素</p>
                            <p>支持JPG,GIF,PNG格式，大小不超过200K</p>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section v-if="isSeen === 3">
            <div class="signin-form">
                <div class="register-title" style="margin-top:10px;">修改个人信息</div>
                <div class="part">
                    <div class="conl">
                        <div class="item register-item"><label class="labelregister-lable">*姓名</label><input class="register-normal-input" v-model="name" type="text"></div>
                            <div class="item register-item"><label class="labelregister-lable">艺名</label><input class="register-normal-input" v-model="stageName" type="text"></div>
                            <div class="item register-item"><label class="labelregister-lable">出生日期</label><input class="register-normal-input" onClick="WdatePicker()" v-model="bornDay" type="text"></div>
                            <div class="item register-item" style="height:50px;"><label class="register-label">政治面貌</label>
                                <select style="margin-left: 120px;width:180px;" v-model="politicalStatus1">
                                    <option name="region" value="partyMember">中共党员</option>
                                    <option name="region" value="proPartyMember">中共预备党员</option>
                                    <option name="region" value="youthLeagueMember">共青团员</option>
                                    <option name="region" value="committeMember">民革党员</option>
                                    <option name="region" value="NLDleaguer">民盟盟员</option>
                                    <option name="region" value="DABmember">民建会员</option>
                                    <option name="region" value="DPPmember">民进会员</option>
                                    <option name="region" value="migrantWorkersPartyMem">民工党党员</option>
                                    <option name="region" value="publicInsParty">致公党党员</option>
                                    <option name="region" value="memberSociety">九三学社社员</option>
                                    <option name="region" value="taiwanDemocraticAlliance">台盟盟员</option>
                                    <option name="region" value="personagesWithout">无党派民主人士</option>
                                    <option name="region" value="masses">群众</option>
                                </select>

                                <select style="margin-left: 120px;width:180px;" v-model="politicalStatus2">
                                    <option name="region" value="partyMember">中共党员</option>
                                    <option name="region" value="proPartyMember">中共预备党员</option>
                                    <option name="region" value="youthLeagueMember">共青团员</option>
                                    <option name="region" value="committeMember">民革党员</option>
                                    <option name="region" value="NLDleaguer">民盟盟员</option>
                                    <option name="region" value="DABmember">民建会员</option>
                                    <option name="region" value="DPPmember">民进会员</option>
                                    <option name="region" value="migrantWorkersPartyMem">民工党党员</option>
                                    <option name="region" value="publicInsParty">致公党党员</option>
                                    <option name="region" value="memberSociety">九三学社社员</option>
                                    <option name="region" value="taiwanDemocraticAlliance">台盟盟员</option>
                                    <option name="region" value="personagesWithout">无党派民主人士</option>
                                    <option name="region" value="masses">群众</option>
                                </select>
                            </div>                   
                            <div class="item register-item"><label class="labelregister-lable">*手机</label><input class="register-normal-input" v-model="phoneNumber" type="text"></div>
                            <div class="item register-item"><label class="labelregister-lable">传真</label><input class="register-normal-input" v-model="faxNumber" type="text"></div>
                            <div class="item register-item"><label class="labelregister-lable">电子邮箱</label><input class="register-normal-input" v-model="workEmail" type="text"></div>                    
                    </div>
                    <div class="conr">
                        <div class="item register-item">
                            <label class="labelregister-lable">*性别</label>
                            <form style="margin-left: 120px;">
                                <label><input name="Sex" type="radio" v-model="sex" checked="checked" value="male">男</label>
                                <label style="margin-left:40px;"><input name="Sex" type="radio" v-model="sex" value="female">女</label>
                            </form>
                        </div>
                        <div class="item register-item"><label class="labelregister-lable">民族</label><input class="register-normal-input" v-model="nation" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">籍贯</label><input class="register-normal-input" v-model="placeOfOrigin" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">身份证号（军官证）</label><input class="register-normal-input" v-model="priId" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">办公室电话</label><input class="register-normal-input" v-model="workTel" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">微信号</label><input class="register-normal-input" v-model="weChat" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">通讯地址</label><input class="register-normal-input" v-model="address" type="text"></div>                                
                    </div>

                    <div class="content-part">
                        <div class="item register-item"><label class="labelregister-lable">所在单位</label><input class="register-long-input" v-model="company" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">职务</label><input class="register-long-input" v-model="duties" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">主要社会职务</label><input class="register-long-input" v-model="sociatyDuties" type="text"></div>                    
                    </div>

                    <div class="contentl" style="width:325px;">
                        <div class="item register-item"><label class="labelregister-lable">专业职称</label><input class="register-normal-input" v-model="majorDuties" type="text"></div>                    
                        <div class="item register-item"><label class="labelregister-lable">毕业院校</label><input class="register-normal-input" v-model="graduatedSch" type="text"></div>
                    </div>

                    <div class="contentr" style="width:325px;">
                        <div class="item register-item"><label class="labelregister-lable">学历</label><input class="register-normal-input" v-model="education" type="text"></div>                    
                        <div class="item register-item"><label class="labelregister-lable">专业</label><input class="register-normal-input" v-model="major" type="text"></div>
                    </div>
            </div>

            <div class="register-title">推荐单位或个人信息</div>
                <div class="part">
                    <div class="contentl" style="width:325px;">
                        <div class="item register-item"><label class="labelregister-lable">推荐单位</label><input class="register-normal-input" v-model="recommandCompany" type="text"></div>                    
                        <div class="item register-item"><label class="labelregister-lable">电话</label><input class="register-normal-input" v-model="recommandComTel" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">推荐人</label><input class="register-normal-input" v-model="recommandComMan" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">电话</label><input class="register-normal-input" v-model="recommandManTel" type="text"></div>                    
                    </div>
                    <div class="contentr" style="width:325px;">
                        <div class="item register-item"><label class="labelregister-lable">联系人</label><input class="register-normal-input" v-model="contactMan" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">地址</label><input class="register-normal-input" v-model="contactComAddress" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">职务</label><input class="register-normal-input" v-model="contactManDuties" type="text"></div>
                        <div class="item register-item"><label class="labelregister-lable">地址</label><input class="register-normal-input" v-model="contactManAddress" type="text"></div>                   
                    </div>
                </div>

            <div class="register-title">文艺专长</div>
            <div class="part">
                <form id="expertise" style="color:#000">
                    <label><input type="checkbox" v-model="artSort" value="literature" />文学</label>
                    <label><input type="checkbox" v-model="artSort" value="theatre" />戏剧</label>
                    <label><input type="checkbox" v-model="artSort" value="movie" />电影</label>
                    <label><input type="checkbox" v-model="artSort" value="music" />音乐</label>
                    <label><input type="checkbox" v-model="artSort" value="art" />美术</label>                    
                    <label><input type="checkbox" v-model="artSort" value="quYi" />曲艺</label>                    
                    <label><input type="checkbox" v-model="artSort" value="dance" />舞蹈</label> 
                    <label><input type="checkbox" v-model="artSort" value="folkLiterature" />民间文艺</label>                     
                    <label><input type="checkbox" v-model="artSort" value="photography" />摄影</label> 
                    <br>     
                    <label><input type="checkbox" v-model="artSort" value="calligraphy" />书法</label>
                    <label><input type="checkbox" v-model="artSort" value="acrobatics" />杂技</label>
                    <label><input type="checkbox" v-model="artSort" value="television" />电视</label>
                    <label><input type="checkbox" v-model="artSort" value="literaryCriticism" />文艺评论</label>
                    <label><input type="checkbox" v-model="artSort" value="theory" />理论</label>                    
                    <label><input type="checkbox" v-model="artSort" value="mediaPublicity" />媒体宣传</label>                    
                    <label><input type="checkbox" v-model="artSort" value="artManagement" />艺术管理</label>               
                    <label><input type="checkbox" v-model="artSort" value="other" />其它</label>                  
                </form>
            </div>

            <div class="btn-submit" style="left: -80px;">
                <button>修改资料</button>
            </div>
        </section>

        <section v-if="isSeen === 4">
            <div class="signin-form">
                <div class="register-title" style="margin-top:10px">修改密码</div>
                <div class="part">
                    <div class="conl">
                        <div class="item register-item"><label class="labelregister-lable">*原密码</label><input class="register-normal-input" type="text"></div>
                            <div class="item register-item"><label class="labelregister-lable">新密码</label><input class="register-normal-input" type="text"></div>
                            <div class="item register-item"><label class="labelregister-lable">确认新密码</label><input class="register-normal-input" type="text"></div>
                    </div>
                </div>
            <div class="btn-submit" style="left: -80px;">
                <button>修改密码</button>
            </div>
        </section>

        <section v-if="isSeen === 5">
            <div class="title-button">
                <button class="button-group" id="pull">收件箱</button>
                <button class="button-group" style="left: 90px;" id="push">发信箱</button>
                <button class="button-group" style="left: 180px;" id="inPush">发站内信</button>
            </div>
            <div style="padding: 10px;">
                <table class="table side-content-header">
                    <thead style="display: block;">
                        <tr>
                            <th style="width: 10%;">类型</th>
                            <th style="width: 15%;">状态</th>
                            <th style="width: 15%;">标题</th>
                            <th></th>
                            <th style="width: 15%;">发件人</th>
                            <th style="width: 20%;">发信时间</th>
                            <th style="width: 25%;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <button>0/0条记录</button>
            </div>
        </section>

        <section v-if="isSeen === 6">
            <div style="padding: 10px;">
                <table class="table side-content-header">
                    <thead>
                        <tr>
                            <th style="width: 10%;">评论主题</th>
                            <th style="width: 15%;"></th>
                            <th style="width: 15%;">评论内容</th>
                            <th style="width: 17%;"></th>
                            <th style="width: 15%;"></th>
                            <th style="width: 20%;">类型</th>
                            <th style="width: 25%;">评论时间</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <button>0/0条记录</button>
            </div>
        </section>

        <section v-if="isSeen === 7">
            <div class="signin-form">
                <div class="register-title" style="margin-top:10px;">提交意见<button @click="openMinicry" style="float:right;margin-right:10px;">新建反馈</button></div>
                <div class="part" style="position:relative">
                    <div style="height:30px;">
                    <label style="position:absolute;display:inline-block;top:5px;left:10px;color:#000;font-size:16px;">标题：</label>
                        <p style="display:inline-block；line-height: 34px;line-height: 34px;font-size: 16px;color: #000;margin-left: 41px;">希望多加一些功能</p>
                    </div>
                    <div style="height:30px;border-bottom:1px solid #bdbdbd;position:relative;">
                        <label style="position:absolute;display:inline-block;top:5px;left:10px;color:#bdbdbd;font-size:14px;">内容：</label>                        
                        <p style="display:inline-block;margin-left:50px;line-height:33px;color:#bdbdbd;font-size:14px;">希望多加一些功能希望多加一些功能希望多加一些功能希望多加一些功能希望多加一些功能希望多加一些功能希望多加一些功能希望多加一些功能</p>                                            
                    </div>
                </div>
        </section>

    </div>
</div>

<div class="minicry-wraper" id="minicry" v-if="isSeenMinicry">
    <div class="minicry-body">
        <div class="minicry-title">新建反馈<i class="minicry-close" @click="isClose"><img src="./icon/close.png" alt="" style="width:100%;height:100%;position:absolute;top:0;left:0;"></i></div>
        <div class="minicry-content">
            <div class="minicry-content-title">
                <label>反馈标题</label>
                <input placeholder="请输入标题..." class="commentTitle" type="text">
            </div>
            <div class="minicry-content-main">
                <textarea cols="30" rows="10" class="minicry-content-main"></textarea>
            </div>
        </div>
        <button class="minicry-submit" @click="isClose">提交反馈</button>
    </div>
</div>
</div>
    
    <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">

    var membermain = new Vue({
        el:'#membermain',
        data:{
            isSeen:3,
            indexReTime:'2017-01-12',
            indexLastTime:'2017-01-12',
            indexUsrName:'王志军',
            indexUsrNum:'11554481',
            indexWebInfo:'2',
            indexUsrImg:'./img/face1.png',
            //首页
            memberImgA:'./img/face1.png',
            memberUpLoadA:'./img/face1.png',
            memberInputA:'',
            memberImgB:'./img/face1.png',
            memberUpLoadB:'./img/face1.png',
            memberInputB:'',
            //会员卡
            name:'',
            stageName:'',
            bornDay:'',
            politicalStatus1:'',
            politicalStatus2:'',
            phoneNumber:'',
            faxNumber:'',
            workEmail:'',
            company:'',
            duties:'',
            sociatyDuties:'',
            majorDuties:'',
            graduatedSch:'',
            sex:'',
            nation:'',
            placeOfOrigin:'',
            priId:'',
            workTel:'',
            weChat:'',
            address:'',
            major:'',
            education:'',
            recommandCompany:'',
            recommandComTel:'',
            recommandComMan:'',
            recommandManTel:'',
            contactMan:'',
            contactComAddress:'',
            contactManDuties:'',
            contactManAddress:'',
            artSort:'',
            //修改资料
            changeOriginCode:'',
            changeNewCode:'',
            changeConNewCode:'',
            //修改密码
            commentTitle:'',
            commentContent:'',
            commentType:'',
            commentTime:'',
            //我的评论

        },
        methods:{
            whenListClicked:function(num){
                this.isSeen = num;
            },
            download:function(url){
                url = "./img/face1.png";
                var a = document.createElement("a");
                var fileName = "下载.png";
                a.href = url;
                a.download = fileName;
                a.click();
            },
            printImg: function(url){
                url = "./img/face1.png";
                var img = "<img width='100%' src='" + url+ "'>"
                printWindow = window.open();
                printWindow.document.write(img);
                printWindow.print();
            },
            openMinicry:function(){
                minicry.isSeenMinicry = true;
            }
        }
    });

    var minicry = new Vue({
        el:'#minicry',
        data:{
            isSeenMinicry:false,
        },
        methods:{
            isClose:function(){
                if(minicry.isSeenMinicry === true){
                    minicry.isSeenMinicry = false;
                    console.log(minicry.isSeenMinicry);
                }
                else if(minicry.isSeenMinicry === false){
                    minicry.isSeenMinicry = true;
                    console.log(minicry.isSeenMinicry);
                }
            }
        }
    })

    </script>
</body>
</html>